<template>
  <div id="sceneMake">
    <div class="scene-make-title">任务制作</div>

    <!-- 第一大块：业务场景设定 -->
    <div class="section-block">
      <div class="section-title">业务场景设定</div>
      <div class="form-content">
        <el-form :model="formData" label-position="top" class="form-layout">
          <!-- 业务名称 -->
          <el-form-item label="业务类型">
            <el-select
              v-model="formData.businessType"
              placeholder="请选择业务类型"
              style="width: 100%"
            >
              <el-option label="客户服务" value="1"></el-option>
              <el-option label="销售管理" value="2"></el-option>
              <el-option label="市场营销" value="3"></el-option>
            </el-select>
          </el-form-item>

          <!-- 场景名称 -->
          <el-form-item label="场景名称（任务名称）">
            <el-input
              v-model="formData.sceneName"
              placeholder="请输入场景名称"
            ></el-input>
          </el-form-item>

          <!-- 场景背景 -->
          <el-form-item label="场景描述（任务介绍）">
            <el-input
              v-model="formData.sceneDesc"
              type="textarea"
              :rows="5"
              placeholder="请输入场景描述"
            ></el-input>
          </el-form-item>

          <!-- 学习目标 -->
          <el-form-item label="学习目标">
            <el-input
              v-model="formData.learningGoal"
              type="textarea"
              :rows="4"
              placeholder="请输入学习目标"
            ></el-input>
          </el-form-item>

          <!-- 预计时长 -->
          <el-form-item label="预计时长">
            <el-input
              style="width: 330px"
              v-model="formData.expectedDuration"
              placeholder="请输入预计时长"
            ></el-input
            >&nbsp;&nbsp;分钟
          </el-form-item>

          <!-- 场景背景图（任务头像）-->
          <el-form-item label="场景背景图（任务头像）">
            <div class="carousel-section">
              <el-carousel
                indicator-position="none"
                :autoplay="false"
                :loop="false"
                height="200px"
              >
                <el-carousel-item v-for="item in 4" :key="item">
                  <div class="scroll-list">
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="scroll-t">
                        <div class="scroll-img">
                          <img
                            src="@/assets/img/TaskManagement/test.png"
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- <h3>{{ item }}</h3> -->
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-form-item>

          <!-- 自定义上传头像 -->
          <el-form-item label="自定义上传">
            <div class="upload-section">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleAvatarChange"
                accept=".jpg"
              >
                <div class="upload-area">
                  <img
                    v-if="formData.shuzirenPic"
                    :src="formData.shuzirenPic"
                    class="avatar-preview"
                  />
                  <div v-else class="upload-placeholder">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </div>
                </div>
              </el-upload>
              <div class="upload-tips">
                <p class="tips-text">尺寸200*200px，jpg格式，不超过2MB</p>
                <div class="example-placeholder">
                  <img
                    v-if="exampleImage"
                    :src="exampleImage"
                    class="example-img"
                  />
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 第二大块：选择角色对话 -->
    <div class="section-block">
      <div class="section-header">
        <div class="section-title">选择对话角色</div>
        <el-button text class="view-all-btn" @click="checkMore()">
          查看更多角色
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
      <div class="role-list">
        <div
          class="role-item"
          :class="{ selected: item.selected }"
          v-for="item in roleList"
          :key="item.id"
          @click="selectRole(item.id)"
        >
          <div class="isSelected">
            <img
              src="@/assets/img/sceneMaking/ischecked.png"
              alt=""
              v-show="item.selected"
            />
            <img
              src="@/assets/img/sceneMaking/nochecked.png"
              alt=""
              v-show="!item.selected"
            />
            <span :style="{ color: item.selected ? '#457aff' : '#707175' }">{{
              item.selected ? "选中" : "未选中"
            }}</span>
          </div>
          <div class="avatar">
            <div class="avatar-placeholder"></div>
          </div>
          <div class="role-info">
            <div class="name">{{ item.name }}</div>
            <div class="info-row">
              <span class="label">岗位：</span>
              <span class="value">{{ item.position }}</span>
            </div>
            <div class="info-row">
              <span class="label">年龄：</span>
              <span class="value">{{ item.age }}</span>
            </div>
            <div class="info-row">
              <span class="label">性格：</span>
              <span class="value">{{ item.personality }}</span>
            </div>
            <div class="info-row">
              <span class="label">数字人形象：</span>
              <span class="value">{{ item.shuzirenPic }}</span>
            </div>
            <div class="info-row">
              <span class="label">数字人声音：</span>
              <span class="value">{{ item.shuzirenVoice }}</span>
            </div>
            <div class="info-row">
              <span class="label">经历：</span>
              <span class="value" :title="item.experience">{{
                item.experience
              }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="section-title">设定对话角色</div>
      <el-input
        v-model="dialogRole"
        type="textarea"
        :rows="5"
        placeholder="角色在场景中的作用"
      ></el-input>
    </div>

    <!-- 第三大块：设定培训角色 -->
    <div class="section-block">
      <div class="form-content">
        <el-form
          :model="trainingFormData"
          label-position="top"
          class="form-layout"
        >
          <!-- 设定培训角色 -->
          <div class="form-title">设定培训角色</div>
          <el-form-item label="">
            <el-input
              v-model="trainingFormData.targetAudience"
              type="textarea"
              :rows="3"
              placeholder="理财经理"
            ></el-input>
          </el-form-item>

          <!-- 设定培训角色应答评分（模型人设与回复逻辑） -->
          <div class="form-title">
            设定培训角色应答评分（模型人设与回复逻辑）
          </div>
          <el-form-item label="">
            <el-input
              v-model="trainingFormData.scenarioRole"
              type="textarea"
              :rows="9"
              placeholder="# 角色
你是一位专业的理财教练，负责对学员王经理与客户沟通的内容进行评价。

## 技能
### 技能1: 评价沟通内容
1. 仔细分析王经理与客户沟通的内容。
2. 从态度积极、完整准确、表达清晰、表达流畅、语言恰当、经理回答内容是否解决客户问题这六个维度进行评价。
3. 给出评价等级，评价等级分为优秀、欠佳。
4. 评价内容不能超过200个字符。"
            ></el-input>
          </el-form-item>

          <!-- 设定教练指导（模型人设与回复逻辑） -->
          <div class="form-title">设定教练指导（模型人设与回复逻辑）</div>
          <el-form-item label="">
            <el-input
              v-model="trainingFormData.roleReason"
              type="textarea"
              :rows="9"
              placeholder="# 角色
你是一位理财教练。你有一位学员银行理财王经理，面对一位客户。王经理不知道如何与客户沟通推销合适的。你需要帮助学员王经理，态度亲切、通俗易懂地推荐适合的产品并解答客户提出的问题。内容不超200字。"
            ></el-input>
          </el-form-item>

          <!-- 知识库上传 -->
          <div class="form-title">知识库上传</div>
          <el-form-item label="">
            <div class="knowledge-upload">
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
              >
                <div
                  class="upload-placeholder"
                  v-if="!trainingFormData.knowledgeLibrary"
                >
                  <el-icon>
                    <Plus />
                  </el-icon>
                </div>
              </el-upload>
            </div>
          </el-form-item>

          <!-- 回答示例 -->
          <div class="form-title">回答示例</div>
          <el-form-item label="">
            <el-input
              v-model="trainingFormData.answerExample"
              type="textarea"
              :rows="5"
              placeholder="问题：我家里开销不大，主要是生活费，那我的钱除了放在银行活期，还能怎么安排呀?
回答示例：那您看这样呀，我们可以根据您家庭的开销情况，为您配置一些流动性合造、收益相对稳定的理财产品呢，这样既不影响您的日常生活开销，又能让资会有所增值哦。"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="footer-buttons">
      <el-button color="#4F46E5" @click="saveAndPreview()"
        >保存并预览</el-button
      >
      <!-- <el-button color="#4F46E5" @click="saveFn()">保存</el-button>
      <el-button color="#4F46E5" @click="previewFn()">预览</el-button> -->
      <el-button color="#4F46E5" @click="publishFn()">发布</el-button>
    </div>

    <!-- 预览二维码弹窗 -->
    <el-dialog
      v-model="showPreviewDialog"
      width="30%"
      :close-on-click-modal="false"
    >
      <div class="preview-content">
        <div class="preview-img"></div>
        <div class="preview-text">请扫描上方二维码</div>
        <div class="preview-text">在手机端体验</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SceneMakeDetails",
  data() {
    return {
      // 业务场景表单数据
      formData: {
        businessType: "", // 业务类型
        sceneName: "", // 场景名称
        sceneDesc: "", // 场景描述
        learningGoal: "", // 学习目标
        expectedDuration: "", // 预计时长
        shuzirenPic: "", // 数字人头像
      },
      dialogRole: "", // 对话角色
      exampleImage: "", // 示例图片
      // 场景背景图轮播数据
      backgroundImages: [
        {
          url: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800",
          name: "图片1",
        },
        {
          url: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800",
          name: "图片2",
        },
        {
          url: "https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=800",
          name: "图片3",
        },
        {
          url: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=800",
          name: "图片4",
        },
        {
          url: "https://images.unsplash.com/photo-1573164713988-8665fc963095?w=800",
          name: "图片5",
        },
      ],
      // 角色列表数据
      roleList: [
        {
          id: 1,
          name: "陈强",
          position: "私人银行高级理财经理",
          age: "35岁",
          personality: "专业严谨、富于钻研、具有密切的市场洞察力",
          shuzirenPic: "商业比较、沟通与信",
          shuzirenVoice: "低沉稳重，富有磁性",
          experience:
            "10年金融行业从业经验，服务过500+高净值客户10年金融行业从业经验，服务过500+高净值客户10年金融行业从业经验，服务过500+高净值客户10年金融行业从业经验，服务过500+高净值客户",
          selected: false,
        },
        {
          id: 2,
          name: "陈强",
          position: "私人银行高级理财经理",
          age: "35岁",
          personality: "专业严谨、富于钻研、具有密切的市场洞察力",
          shuzirenPic: "商业比较、沟通与信",
          shuzirenVoice: "低沉稳重，富有磁性",
          experience: "10年金融行业从业经验，服务过500+高净值客户",
          selected: false,
        },
        {
          id: 3,
          name: "陈强",
          position: "私人银行高级理财经理",
          age: "35岁",
          personality: "专业严谨、富于钻研、具有密切的市场洞察力",
          shuzirenPic: "商业比较、沟通与信",
          shuzirenVoice: "低沉稳重，富有磁性",
          experience: "10年金融行业从业经验，服务过500+高净值客户",
          selected: false,
        },
        {
          id: 4,
          name: "陈强",
          position: "私人银行高级理财经理",
          age: "35岁",
          personality: "专业严谨、富于钻研、具有密切的市场洞察力",
          shuzirenPic: "商业比较、沟通与信",
          shuzirenVoice: "低沉稳重，富有磁性",
          experience: "10年金融行业从业经验，服务过500+高净值客户",
          selected: false,
        },
        {
          id: 5,
          name: "陈强",
          position: "私人银行高级理财经理",
          age: "35岁",
          personality: "专业严谨、富于钻研、具有密切的市场洞察力",
          shuzirenPic: "商业比较、沟通与信",
          shuzirenVoice: "低沉稳重，富有磁性",
          experience: "10年金融行业从业经验，服务过500+高净值客户",
          selected: false,
        },
      ],
      // 培训角色表单数据
      trainingFormData: {
        targetAudience: "", // 设定培训角色
        scenarioRole: "", // 设定培训角色应答评分（模型人设与回复逻辑）
        roleReason: "", // 设定教练指导（模型人设与回复逻辑）
        knowledgeLibrary: "", // 知识库上传
        answerExample: "", // 回答示例
      },
      showPreviewDialog: false, // 是否显示预览弹窗
    };
  },
  methods: {
    // 选择角色（支持多选）
    selectRole(id) {
      const role = this.roleList.find((role) => role.id === id);
      if (role) {
        role.selected = !role.selected;
      }
    },
    // 保存并预览
    saveAndPreview() {
      this.showPreviewDialog = true;
    },
    // 保存
    saveFn() {},
    // 预览
    previewFn() {},
    // 发布
    publishFn() {},

    // 处理头像上传
    handleAvatarChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      const isJPG = file.raw.type === "image/jpeg";

      if (!isJPG) {
        this.$message.error("只能上传 JPG 格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB！");
        return false;
      }

      // 创建图片预览
      const reader = new FileReader();
      reader.onload = (e) => {
        this.formData.shuzirenPic = e.target.result;
      };
      reader.readAsDataURL(file.raw);
    },

    // 查看更多角色
    checkMore() {
      this.$router.push("/sceneMake/moreRoles");
    },
  },
};
</script>

<style lang="scss" scoped>
#sceneMake {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 80px;

  .scene-make-title {
    font-size: 24px;
    font-weight: bold;
    color: #0a0a0a;
    margin-bottom: 30px;
  }

  // 大块样式
  .section-block {
    padding: 47px 57px 30px 45px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-sizing: border-box;

    .section-title {
      font-weight: bold;
      font-size: 18px;
      color: #0a0a0a;
      margin-bottom: 30px;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      .view-all-btn {
        font-size: 16px;
        color: #374151;
      }
    }

    .form-content {
      .form-title {
        font-weight: bold;
        font-size: 18px;
        color: #0a0a0a;
        margin-bottom: 23px;
      }

      .knowledge-upload {
        width: 100%;
        :deep(.avatar-uploader) {
          width: 100%;
          height: 56px;
          .el-upload {
            display: flex;
            height: 100%;
          }
          .upload-placeholder {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            border: 1px solid #d6d9df;
            cursor: pointer;
          }
          .el-icon {
            font-size: 24px;
            color: #8b8b8b;
          }
        }
      }

      .form-layout {
        :deep(.el-form-item__label) {
          font-size: 16px;
          color: #374151;
        }

        :deep(.el-input__inner) {
          border-radius: 4px;
        }

        :deep(.el-textarea__inner) {
          border-radius: 4px;
          resize: none;
        }
      }

      // 轮播图样式
      .carousel-section {
        width: 100%;

        :deep(.el-carousel) {
          border-radius: 8px;
          overflow: hidden;
        }

        .carousel-img {
          width: 100%;
          height: 150px;
          object-fit: cover;
        }

        .el-carousel-item {
          :deep(.el-carousel__arrow--left) {
            left: 0;
          }
          :deep(.el-carousel__arrow--right) {
            right: 0;
          }
        }
        .scroll-list {
          display: flex;
          gap: 16px;

          > div {
            width: 200px;
            height: 200px;
            background: #ffffff;

            .scroll-img {
              width: 200px;
              height: 200px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        :deep(.el-carousel__arrow) {
          background-color: rgba(0, 0, 0, 0.5);
        }
      }

      // 上传区域
      .upload-section {
        .avatar-uploader {
          .upload-placeholder {
            width: 130px;
            height: 130px;
            background-color: #fbfdff;
            border: 1px dashed #999;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            .el-icon {
              font-size: 24px;
              color: #999;
            }
          }
        }
        .upload-area {
          .avatar-preview {
            width: 130px;
            height: 130px;
            object-fit: cover;
          }
        }
        .upload-tips {
          font-size: 14px;
          color: #a0a0a0;
          .example-image {
            display: flex;
            align-items: flex-start;
          }
        }
      }
    }
  }

  // 角色列表
  .role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;

    .role-item {
      position: relative;
      width: calc(33% - 15px);
      background: #ffffff;
      box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      padding: 35px 25px 20px 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;

      &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
      }

      &.selected {
        border: 2px solid #457aff;
      }

      .isSelected {
        position: absolute;
        top: 22px;
        right: 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 9px;
      }

      .avatar {
        margin-bottom: 20px;

        .avatar-placeholder {
          width: 140px;
          height: 140px;
          border-radius: 50%;
          background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
          border: 3px solid #f0f9ff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
      }

      .role-info {
        width: 100%;
        margin-bottom: 20px;

        .name {
          font-weight: bold;
          font-size: 21px;
          color: #374151;
          margin-bottom: 15px;
          text-align: left;
        }

        .info-row {
          display: flex;
          align-items: flex-start;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            font-size: 14px;
            color: #374151;
            font-weight: bold;
            flex-shrink: 0;
          }

          .value {
            font-size: 14px;
            color: #374151;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 100%;
          }
        }
      }

      .actions {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        padding-top: 15px;

        .action-btn {
          font-size: 14px;
          cursor: pointer;
          transition: all 0.2s ease;

          &.edit {
            color: #4f46e5;
          }

          &.delete {
            color: #4f46e5;
          }
        }
      }
    }
  }

  // 底部按钮
  .footer-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    z-index: 100;

    .el-button {
      min-width: 100px;
    }
  }

  // 预览二维码弹窗
  .preview-content {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .preview-img {
      width: 243px;
      height: 252px;
      background: url("../../assets/img/TaskManagement/preview-border.png")
        no-repeat center center;
      background-size: 100% 100%;
      margin-bottom: 25px;
    }
    .preview-text {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 18px;
      color: #111827;
    }
  }
}
</style>